<template>
<div class="page emergencyList-page" data-page="emergencyList" style="z-index: 2;">
    <div class="link-page-nav">
        <a href="#" class="link back" @click=$root.backToTab()>
            <i class="iconfont icon-zuo"></i>
        </a>
    </div>
    <div class="link-page-top" style="padding-bottom: 17px;">
        <div class="link-page-title">历史记录列表</div>
        <a href="#" class="link popover-open" data-popover="#dector_menu" >
            <i class="iconfont icon-APPicon_shaixuan1
" id="active" style="font-size: 23px;"></i>
        </a>
    </div>
	  <div data-infinite-distance="80" class="page-content infinite-scroll-content show-emergency-content" @infinite="loadMoreEmergencyList" style="padding-bottom: 100px;">
        <div class="block block-strong no-hairline-bottom" id="loaddingCont">
            <div class="list media-list yjyals-list">
              <ul id="show_emergency_list"></ul>
            </div>
            <div id="emerg-preloader" style="margin-top: 0px" class="preloader infinite-scroll-preloader"></div>
        </div>
    </div>
	  <div class="popover select-option-con" id="dector_menu">
        <div class="popover-angle"></div>
        <div class="popover-inner">
            <div class="list">
              <ul>
                <li><a href="" class="list-button item-link popover-close" id="emergency_unit_change">选择单位</a></li>           
                <li><a href="" class="list-button item-link popover-close" @click="getTbTime" id="sel_time">选择日期</a></li>
                <li><a href="" class="list-button item-link popover-close removeScreen select-active" @click="removeScreen" >清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
              </ul>
            </div>
        </div>
    </div>
</div>
</template>
<style scoped>
.time-popover {
	top: 102px;
	left: 37px;
}

.emergency-list-select {
	padding-top: 5px;
}

.emergency-list-select .col {
	margin: 10px auto;
	font-size: 14px;
	text-align: center;
	color: #666666;
}

.emergency-list-select .col i {
	font-size: 14px;
}

.show-emergency-content .block-strong {
	margin-top: 0px;
	padding: 0;
}

.show-emergency-content .list {
	margin: 0px;
}

#show_emergency_list {
	padding: 0 20px;
}

#show_emergency_list a {
	padding-left: 0px;
}

#show_emergency_list .list-inner-all {
	padding: 0px;
	padding-bottom: 5px;
}



#show_emergency_list .item-title {
	font-size: 16px;
  color:rgba(51,51,51,1);
  font-weight:bold;
}

#show_emergency_list .item-subtitle {
	font-size: 12px;
}

.emergency-link-plan {
  padding: 10px 16px;
  background: transparent;
  border-top: 1px solid rgba(225,225,225,0.4);
}

.emergency-list-right .item-inner:after {
	height: 0px !important;
}
#show_emergency_list .left-block{
  width: 64px;
  height: 64px;
  background:rgba(244,244,244,1);
  border:1px solid rgba(214, 214, 214, 1); 
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#show_emergency_list .left-block img{
    width: 80%;
    height: 80%;
}
</style>
<script>
  return {
      data: function () {
        return {
            orgId:0,
            pageIndex:0,
            pageSize:25,
            startTime:"",//开始时间
            endTime:"",//结束时间
            isMoreData:false,
            selectOptionIndex:''
        }
      },
      methods: {
    	  removeScreen:function(){
              var self = this;
            
              if (userInfor.isMuilUnitUser == 1){//多
                  self.selectOptionOrg = "";
                  self.decterOrgId= userInfor.organizationIds;
                  jQuery("#emergency_unit_change").html("选择单位");
                  jQuery("#emergency_unit_change").removeClass('select-active');

              }
              self.startTime = '';
              self.endTime = '';
              self.pageIndex = 0;
              self.orgId=userInfor.organizationIds;
              self.selectOptionIndex = "";
              self.selectOptionDec = "";
              jQuery("#sel_time").html("选择日期");
              jQuery("#sel_time").removeClass('select-active');
              self.clearContent();
              self.getEmergencyList();
          },
        loadMoreEmergencyList:function(){
            var self = this;
            if (this.isMoreData){
                self.pageIndex++;
                self.getEmergencyList();
            }
        },
        getEmergencyList:function(){
          var self = this;
        //筛选按钮有值变色
        if(jQuery("#emergency_unit_change")[0].innerText != "选择单位" || jQuery("#sel_time")[0].innerText != "选择日期"){
            jQuery("#active").addClass("select-active");
        }else{
            jQuery("#active").removeClass("select-active");
        }
          $("#show_emergency_list").empty();
          Dao.getEmergency({
                userName:userInfor.accountName,
	      	     deviceId:appKeyObj.deviceId,
	      	     orgIds:self.orgId,
                status:2,
                pageSize:self.pageSize,
                pageIndex:self.pageIndex,
                startTime:self.startTime,
                endTime:self.endTime,
          },function(data) {
                if (data&&data.length > 0){
                    if (data.length < self.pageSize){
                        $("#emerg-preloader").hide();
                        self.isMoreData = false
                    } else {
                        $("#emerg-preloader").show();
                        self.isMoreData = true;
                    }
                    for (var i = 0; i < data.length; i++){
                        if(data[i].logoUrl){
                            icon = data[i].logoUrl;
                        }else{
                            icon = staticPath+"img/common/default-build.png";
                        }
                        $("#show_emergency_list").append(`
                            <li>
                                <div class="item-inner list-inner-all">
                                    <div class="item-row">
                                      <div class="item-content emergency-list-right" style="width: 100%;padding-top: 15px;" id="emergencyList_`+data[i].planId+`_`+ data[i].id+`" data-planId="`+data[i].planId+`" data-id="`+data[i].id+`">
                                        <div class="item-inner" style="padding-top: 0px;">
                                          <div class="item-title-row" style="font-size:17px;color:#000000;font-weight:bold;">`+common.transNullundefined(data[i].orgName)+`</div>
                                          <div class="item-subtitle" style="font-size:14px;">`+common.transNullundefined(data[i].mapLocation)+`</div>
                                          <div class="item-subtitle">推送时间：`+common.transNullundefined(data[i].createTime)+`</div>
                                        </div>
                                        <div class="item-media" style="margin-right: 15px;padding-top: 0;">
                                          <div class="left-block">
                                              <img src="`+icon+`" width="44" />
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="emergency-link-plan">
                                        <a href="/planLibraryDetails/`+data[i].planId+`/`+data[i]+`/`+data[i]+`/" data-view=".view-main">
                                          <div class="item-row">
                                              <div class="item-cell" style="color:#2471CA;font-size: 12px;">
                                                  <img src="`+staticPath+`img/apply/linkplan.png" alt="">相关预案 &nbsp;&nbsp;`+common.transNullundefined(data[i].planName)+`
                                              </div>
                                          </div>
                                        </a>
                                    </div>
                            </li>
                        `);
                        jQuery("#emergencyList_"+data[i].planId+"_"+data[i].id).off('click').on('click',function(e) {
                           var dataId = jQuery(e.currentTarget).attr("data-id");
                           var planId = jQuery(e.currentTarget).attr("data-planId");
                           app.router.navigate('/emergencyDetail/'+planId+'/'+dataId+'/');
                        });
                    }
                } else {
                    //暂无数据
                    $("#emerg-preloader").hide();
                    self.isMoreData = false;
                    if(self.pageIndex==0){
                      $("#show_emergency_list").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                    }
                }
          },function(e) {
             $("#emerg-preloader").hide();
             app.methods.showToastBottom("获取应急救援记录列表失败");
          });
        },
        //选择时间
        getTbTime :function() {
          var self = this;
        	loadSelectedDate_Fn(4,function(data){
        		self.startTime = data.startTime;
                self.endTime = data.endTime;
                self.commit();
        	});
        },
        clearContent:function() {
          var self = this;
                if (userInfor.isMuilUnitUser == 0) {
                   
                } else {
                    if (self.selectOptionIndex != "" ||self.orgId != userInfor.organizationIds){
                        $("#unit-search").addClass('search-select');
                    } else {
                        $("#unit-search").removeClass('search-select');
                    }
                }
            },
        //选择时间
        selectTime:function() {
            var self = this;
                var app = this.$app;
                selectDate_Fn(1,function(data){
                    jQuery("#selectTime").empty();
                    if(self.selectOptionIndex != data.index){
                        var timeArr = data.startTime.split("-");
                        var timeStr = timeArr[0]+"年"+timeArr[1]+"月";
                        //jQuery("#selectTime").html(timeStr);
                        self.selectOptionIndex = data.index;
                        self.startTime = data.startTime;
                        self.endTime = data.endTime;
                    }else{
                        self.selectOptionIndex = "";
                        self.startTime = "";
                        self.endTime = "";
                        jQuery("#dector_org").addClass('select-active');
                       /*  jQuery("#selectTime").html("选择日期"); */
                    }
                    self.commit();
                },self.selectOptionIndex);
           
        },
        commit:function(){
            var self = this;
            if (self.startTime == "" && self.endTime == "") {
                self.startTime = '';
                self.endTime = '';
                self.pageIndex = 0;
               /*  $("#selectTime").html('选择时间'); */
                $("#show_emergency_list").empty();
                self.clearContent();
                self.getEmergencyList();
                return;
            }
            if (self.startTime == "") {
                app.methods.showToastBottom("请选择开始时间")
                return;
            }
            if (self.endTime == "") {
                app.methods.showToastBottom("请选择结束时间")
                return;
            }
            var startTime = self.startTime.replace(/-/g,'/');
            var endTime = self.endTime.replace(/-/g,'/');

            var time1 = Date.parse(startTime); // 开始时间
            var time2 = Date.parse(endTime); // 结束时间
            jQuery("#sel_time").addClass("select-active");
            jQuery("#sel_time").html(self.startTime.substring(0,7));
            if (time2 > time1){
                self.pageIndex = 0;
                $("#show_emergency_list").empty();
                self.clearContent();
                self.getEmergencyList();
            } else {
                app.methods.showToastBottom("结束时间应大于开始时间")
            }
        },
      },
      on: {
        pageInit: function(e, page) {
              var self = this;
              //单联网单位
              if(userInfor.isMuilUnitUser == 0){
                $("#unit-search").hide();
                self.orgId = userInfor.organizationIds;
                $("#emergency_unit_change").hide();
                $("#zdInfo").hide();
                
              }else{
            	   $("#selectTime").hide(); 
                //多联网单位
                if (currentUserUnitListData.length!=0){
                   if (self.orgId == 0) {
                       $("#emergency_unit_change span").html(currentUserUnitListData[0].shortName);
                       self.orgId = userInfor.organizationIds;
                   }
                }
                $("#emergency_unit_change").show().click(function(event) {
                    loadSelectUnitFunc(function(data){
                        self.orgId = data.orgId;
                        $("#emergency_unit_change").html(data.orgName);
                         $("#emergency_unit_change").addClass("select-active")
                        $("#show_emergency_list").empty();
                        self.pageIndex = 0;
                        self.getEmergencyList();
                        self.clearContent();
                    });
                });
              }
              self.getEmergencyList();
        }
      }
  }
</script>